<template>
  <div class="employees">
    <pageTools :showBefore="true">
      <template #right>
        <el-button
          type="primary"
          :disabled="'permission-import' | btnPerm"
          @click="$router.push('/import')"
          >导入</el-button
        >
        <el-button type="primary" @click="showDailog = true"
          >+ 新增员工</el-button
        >
      </template>
    </pageTools>
    <!-- 头部信息栏 -->
    <el-card class="emp-con-card">
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column align="center" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="username"
          label="姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column align="center" label="头像" width="150">
          <template slot-scope="{ row, $index }">
            <el-popover
              placement="right"
              width="300"
              trigger="click"
              @show="showQRCode($index, row)"
            >
              <div class="myCanvas">
                <canvas :ref="'canvas' + $index"></canvas>
                {{ $index }}
              </div>
              <img
                :ref="'myImg' + $index"
                :src="row.staffPhoto"
                alt="点击扫码查看"
                v-imagerror="baseImg"
                class="avatar"
                slot="reference"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="mobile"
          label="手机号"
          width="150"
        >
        </el-table-column>
        <el-table-column align="center" prop="workNumber" label="工号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="formOfEmployment"
          label="聘用形势"
        >
          <template slot-scope="scope">
            {{ scope.row.formOfEmployment | tranHireType }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="departmentName" label="部门">
        </el-table-column>
        <el-table-column align="center" label="入职时间" width="150">
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否在职">
          <template>在职</template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template>可用</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="300" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" @click="todetial(row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="openRole(row.id)">角色</el-button>
            <el-button type="text" :disabled="'permission-del' | btnPerm">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增员工dialog -->
    <addDialog :showDailog.sync="showDailog"></addDialog>

    <!-- 分配角色dialog -->
    <el-dialog title="分配角色" :visible.sync="showRoleDialog" width="30%">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showRoleDialog = false">取 消</el-button>
        <el-button type="primary" @click="setAssignRoles">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addDialog from "./component/addDialog.vue";
import QrCode from "qrcode";
import {
  getEmpListApi,
  getEmpUserApi,
  setAssignRolesApi,
} from "../../api/employees";
import { getRoleListApi } from "../../api/setting";
export default {
  name: "employees",
  data() {
    return {
      showDailog: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20],
        pageSize: 10,
        total: 100,
      },
      showRoleDialog: false,
      checkList: [],
      roleList: [],
      id: "",
      baseImg:
        "https://lev-1306481888.cos.ap-nanjing.myqcloud.com/bigUserHeader.png",
    };
  },
  components: {
    addDialog,
  },
  methods: {
    // 点击列表头像
    showQRCode(i, row) {
      console.log(this.$refs);
      const c = this.$refs["canvas" + i];
      const img = this.$refs["myImg" + i].src;
      QrCode.toCanvas(c, img, { width: 300, height: 300 });
    },
    // 设置角色
    async setAssignRoles() {
      try {
        await setAssignRolesApi({
          roleIds: this.checkList,
          id: this.id,
        });
        this.$message.success("设置成功");
        this.showRoleDialog = false;
      } catch (error) {
        this.$message.error(error.message);
        console.log(error);
      }
    },
    // 打开角色dialog,获取角色列表
    async openRole(id) {
      this.id = id;
      const { rows } = await getRoleListApi({ page: 1, pagesize: 100 });
      this.roleList = rows;
      const res = await getEmpUserApi(id);
      console.log(res);
      this.checkList = res.roleIds;
      this.showRoleDialog = true;
    },

    // 跳转到Detail页面
    todetial(id) {
      this.$router.push("/employees/detail/" + id);
    },
    // 监听页容量的变化
    sizeChange(size) {
      this.page.pageSize = size;
      this.getEmployeesData();
    },
    // 监听当前页面改变
    currentChange(current) {
      this.page.currentPage = current;
      this.getEmployeesData();
    },
    // 获取员工 列表 更新渲染
    async getEmployeesData() {
      const res = await getEmpListApi({
        page: this.page.currentPage,
        size: this.page.pageSize,
      });
      this.page.total = res.total;
      this.tableData = res.rows;
    },
  },
  created() {
    this.getEmployeesData();
  },
  watch: {
    // tableData(){
    //   this.tableData.map(item=>{
    //     if(!item.staffPhoto){
    //       return item.staffPhoto = this.baseImg
    //     }
    //     return false
    //   })
    // }
  },
};
</script>

<style lang="scss" scoped>
.employees {
  padding: 20px;
}
.avatar {
  width: 100px;
}
</style>